<template>
  <div class="register">
    <!-- 上面 -->
    <div class="top">
      <router-link to="/"
        ><img class="logo" src="../../assets/images/ia_200000000.png"
      /></router-link>

      <div class="login-block">
        <span class="block-text">已有美团账号？</span>
        <button class="block-button" @click="goLogin">登录</button>
      </div>
    </div>
    <hr />

    <!-- 中间 -->
    <div class="content">
      <div class="phone">
        <span class="phonetext">手机号</span>
        <!-- 11111111111111111111111111111111111111111111111111111111 -->
        <input type="text" v-model="register.phone" @blur="phoneInp" />
        <span class="phoneTips" v-show="flagReg.flag">请输入正确手机号</span>
      </div>
      <div class="setpassword">
        <span class="setpasswordtext">创建密码</span>
        <!-- 222222222222222222222222222222222222222222222222222222222 -->
        <input type="text" v-model="register.password" @blur="PasswordInp" />

        <span class="passwordTips" v-show="flagReg.Passwordflag"
          >输入6-18数字字母为密码</span
        >
      </div>
      <div class="confirmpassword">
        <span class="confirmpasswordtext">确认密码</span>
        <!-- 3333333333333333333333333333333333333333333333333333333333 -->
        <input
          type="text"
          v-model="register.confirmPassword"
          @blur="confirmPsInp"
        />

        <span class="confirmpasswordTips" v-show="flagReg.confirmPwflag"
          >输入和上次密码不一致</span
        >
      </div>
      <div class="content-button active" :class="{ orange: orange }">
        <!-- :class="{ orange: !flag && !Passwordflag && !confirmPwflag }" -->
        <button @click="gohome">完成注册并登录</button>
      </div>
      <!-- 协议 -->
      <div class="agreement">
        <div class="setcircular">
          <input
            class="circular"
            type="checkbox"
            v-model="flagReg.checked"
            @click="changechecked"
          />
        </div>

        <div class="setcirculartext">
          我已阅读并同意<a href="">《美团用户协议》</a>
          <a href="">《隐私政策》</a>
          ，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <hr />
    <div
      style="
        margin-top: 20px;
        text-align: center;
        color: #666666;
        font-size: 13px;
      "
    >
      ©meituan.com 京ICP证070791号 京公网安备11010502025545号
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "register",
});
</script>

<script setup>
import { reactive, ref } from "vue";
import router from "../../router";
import { registerApi } from "@/api/register";
import { message } from "ant-design-vue";

const orange = ref(false);
const goLogin = () => {
  router.push("/login");
};
const register = reactive({
  phone: "18025384021",
  password: "",
  confirmPassword: "",
});

const flagReg = reactive({
  flag: false,
  Passwordflag: false,
  confirmPwflag: false,
  checked: false,
});
const PhoneReg = /^[1]([3-9])[0-9]{9}$/;
const PasswordReg = /^[a-z0-9]{6,16}$/;

// 校验手机号
const phoneInp = () => {
  if (!register.phone || !PhoneReg.test(register.phone)) {
    flagReg.flag = true;
  } else {
    flagReg.flag = false;
  }
};

// 校验密码
const PasswordInp = () => {
  if (!register.password || !PasswordReg.test(register.password)) {
    flagReg.Passwordflag = true;
  } else {
    flagReg.Passwordflag = false;
  }
  // fromReg();
};

// 校验确认密码
const confirmPsInp = () => {
  if (!register.password || register.password !== register.confirmPassword) {
    flagReg.confirmPwflag = true;
  } else {
    flagReg.confirmPwflag = false;
  }
  // fromReg();
};

// 点击按钮改变选中
const changechecked = () => {
  // console.log(11);
  // flagReg.checked = !flagReg.checked
  fromReg();
};

// 校验完成之后 按钮变色
const fromReg = () => {
  if (
    !flagReg.Passwordflag &&
    !flagReg.confirmPwflag &&
    !flagReg.flag &&
    !flagReg.checked
  ) {
    orange.value = true;
  } else {
    orange.value = false;
  }
};

// 点击 注册并登陆按钮
const gohome = async () => {
  if (orange.value === false) return;
  await registerApi({ phone: register.phone, password: register.password });
  message.success("注册成功，即将进入登录页面...", 0.5);
  router.push("/login");
};
</script>

<style scoped>
/* 上面部分*/
.register {
  /* border: 1px solid black; */
  /* background: pink; */
  font-size: 14px;
}
.register .top {
  margin: 0 auto;
  width: 980px;
}
.register .logo {
  width: 128px;
  height: 47px;
}
.register .top {
  /* border: 1px solid black; */
  height: 47px;
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
}
.register .top .login-block {
  /* text-align: center; */
  /* vertical-align: middle; */
  line-height: 47px;
  /* height: 21px; */
  align-items: center;
}
.register .top .login-block .block-text {
  margin-right: 10px;
  color: #666666;
}
.register .top .login-block .block-button {
  font-size: 12px;
  width: 46px;
  height: 25px;
  border: none;
  background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%);
}

/* 中间部分*/
.content {
  height: 335px;
  width: 980px;
  margin: 0 auto;
  margin-bottom: 30px;
  padding-top: 30px;
  /* background-color: rgb(202, 109, 109); */
}
.content .content-button button {
  width: 285px;
  height: 34px;
  margin-left: 117px;
  font-weight: bold;
  border: none;
  outline: none;
  background-color: #b8b4b4;
  /* background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%); */
}
.orange button {
  background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%);
}
.phone,
.setpassword,
.confirmpassword {
  height: 60px;
  /* display: ; */
  flex-direction: column;
  margin-left: 50px;
}
.phonetext {
  margin-right: 23px;
  color: #333333;
}
.setpasswordtext,
.confirmpasswordtext {
  margin-right: 10px;
  color: #333333;
}
.content input {
  width: 285px;
  height: 40px;
  outline: none;
}
/* 协议 */
.agreement {
  margin-top: 20px;
  margin-left: 110px;
  width: 270px;
  height: 90px;
  display: flex;
  color: rgba(0, 0, 0, 0.5);
}
.setcircular {
  margin-right: 5px;
  display: block;
  width: 20px;
  height: 84px;
}
.setcirculartext {
  width: 400px;
}
.circular {
  margin: 2px 5px;
  width: 15px !important;
  height: 15px !important;
  float: left;
  border-radius: 50%;
  flex-direction: column-reverse;
}
input {
  border: 1px solid #aaa;
}
.phoneTips,
.passwordTips,
.confirmpasswordTips {
  color: red;
  /* display: none; */
}
</style>
